<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">

  <br>
  <span class="p-float-label">
    <input class="float-input" type="text" size="30" id="email" formControlName="email" pInputText>
    <label for="inputtext" i18n>E-Mail</label>
  </span>
  <div *ngIf="f.email.invalid && (f.email.dirty || f.email.touched)" class="error-red" >
    <div *ngIf="f.email.errors.required" i18n>E-Mail is required.</div>
    <div *ngIf="f.email.errors.email" i18n>E-Mail is not valid.</div>
  </div>

  <br>
  <span class="p-float-label">
    <input type="text" size="30" formControlName="username" pInputText>
    <label for="inputtext" i18n>Username</label>
  </span>
  <div *ngIf="f.username.invalid && (f.username.dirty || f.username.touched)" class="error-red" >
    <div *ngIf="f.username.errors.required" i18n>Username is required.</div>
    <div *ngIf="f.username.errors?.usernameExists" i18n>Username is unavailable.</div>
    <div *ngIf="f.username.errors.invalidChars" i18n>Invalid characters in username</div>
  </div>
  <div *ngIf="f.username.pending" class="pending-blue" i18n>Checking username availability...</div>
  <div *ngIf="f.username.valid" class="valid-green" i18n>Username is available</div>

  <br>
  <span class="p-float-label">
    <input pPassword type="password" size="30" formControlName="password" [feedback]="false"/>
    <label for="inputtext" i18n>Password</label>
  </span>
  <div *ngIf="f.password.invalid && (f.password.dirty || f.password.touched)" class="error-red" >
    <div *ngIf="f.password.errors.required" i18n>Password is required.</div>
  </div>

  <br>
  <span class="p-float-label">
    <input pPassword type="password" size="30" formControlName="confirmPassword" [feedback]="false" />
    <label for="inputtext" i18n>Confirm Password</label>
  </span>
  <div *ngIf="registerForm.errors?.invalid" class="error-red" i18n>Passwords must match.</div>
  <div *ngIf="authError" class="error-red" i18n>Authentification error</div>
  <div *ngIf="duplicateError" class="error-red" i18n>Username or e-mail is already registered</div>

  <br>
  <div class="recaptcha-wrap" i18n>
    This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.
  </div>

  <!--This is just here so that enter submits the form-->
  <button type="submit" style='visibility:hidden'></button>


</form>
